<template>
  <div>
    <page-header title="前端处理数字精度问题"></page-header>
    <div>
      <p>一、浮点数精度丢失</p>
      <div class="mrg-b20">
        未进行处理：
        <el-input-number
          v-model="num1"
          :min="0"
          :max="10000"
          :step="0.1"
          controls-position="right"
        />
        +
        <el-input-number
          v-model="num2"
          :min="0"
          :max="100000"
          :step="0.1"
          controls-position="right"
        />
        = <el-input style="width: 200px" v-model="res1" />
      </div>
      <div>
        已进行处理：
        <el-input-number
          v-model="num3"
          :min="0"
          :max="10000"
          :step="0.1"
          controls-position="right"
        />
        +
        <el-input-number
          v-model="num4"
          :min="0"
          :max="100000"
          :step="0.1"
          controls-position="right"
        />
        = <el-input style="width: 200px" v-model="res2" />
      </div>
    </div>

    <div style="margin-top: 64px">
      <p>二、大数字超过16位精度丢失</p>
      <div>16位：9999999999999999、超过16位：9999999999994322924</div>
      <br />
      <div class="mrg-b20">
        未进行处理：
        <el-input-number
          style="width: 350px"
          v-model="num5"
          controls-position="right"
        />
        = <el-input style="width: 350px" v-model="res3" />
      </div>
      <p style="color: tomato">
        提示：下方是文本输入框，输入数字实际是字符串，数据在js绑定
      </p>
      <div>
        已进行BigInt处理：
        <el-input
          style="width: 350px"
          v-model="num6"
          :min="0"
          controls-position="right"
        />
        = {{ num6 }}
      </div>
      <div>
        已进行JSONbig处理：
        <el-input
          style="width: 350px"
          v-model="res5"
          :min="0"
          controls-position="right"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import JSONbig from "json-bigint";
/**
 *
 * @param num1 数据1
 * @param num2 数据2
 * @param multiple 要扩大的倍数
 */
const computedNum = (num1: number, num2: number, multiple: number) => {
  return (num1 * multiple + num2 * multiple) / multiple;
};

onMounted(() => {
  console.log(computedNum(0.1, 0.2, 10));
});

const num1 = ref<number>(0.1);
const num2 = ref<number>(0.7);
const res1 = computed(() => {
  return num1.value + num2.value;
});

const num3 = ref<number>(0.1);
const num4 = ref<number>(0.7);

const res2 = computed(() => {
  return num3.value + num4.value;
});
const num5 = ref(9999999999994322924);
const res3 = computed(() => {
  return num5.value;
});

const num6 = ref(9999999999994322924n);
console.log(num6.value);

const jsonString = '{"num": 9999999999994322924}';
const res5 = computed(() => {
  return JSONbig.parse(jsonString).num;
});
</script>
<style scoped lang="scss">
.mrg-b20 {
  margin-bottom: 20px;
}
</style>
